<template>
  <div class="my_article_detial">
    <div class="art_title">
      <h3>{{ info.title }}</h3>
    </div>
    <div class="author">
      <van-cell>
        <template #title>
          <div class="author_message">
            <van-image width="50" height="50" round :src="baseURL + info.pic" />
            <div class="author_time">
              <span class="authorname">{{ info.author }}</span>
              <div class="pub_time">{{ info.create_date | getTime }}</div>
            </div>
          </div>
        </template>
      </van-cell>
    </div>
    <div
      class="markdown-body"
      @click="markdownBodyClick"
      v-html="info.content"
    ></div>
    <van-divider>正文结束</van-divider>
    <div class="recommend_about">
      <van-cell value="相关推荐" />
      <van-grid :column-num="2">
        <van-grid-item
          @click="gridItemClick(recommendart.id)"
          v-for="recommendart of recommend"
          :key="recommendart.id"
        >
          <div class="grid-item-content">
            <van-image class="g-image" :src="baseURL + recommendart.pic" />
            <p class="g-text">
              {{ recommendart.title }}
            </p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="art_bottom">
      <van-row gutter="40" type="flex" align="middle">
        <van-col span="8" @click="starClick">
          <van-icon name="star" v-show="info.isCollect" />
          <van-icon name="star-o" v-show="!info.isCollect" />
        </van-col>
        <van-col span="8" @click="supportClick">
          <van-icon name="good-job" v-show="info.isLike" />
          <van-icon name="good-job-o" v-show="!info.isLike" />
        </van-col>
        <van-col span="8" @click="shareClick">
          <van-icon name="share-o" v-if="true" />
          <van-icon name="share" v-else />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { getArticleDetial, userDataHandle } from '@/api/home'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'myArticleDetial',
  async created() {
    await this.craetedDo(this.id)
  },
  props: {
    id: [String, Number]
  },
  filters: {
    getTime(timestamp) {
      return moment(timestamp).fromNow()
    }
  },
  data() {
    return {
      data: {},
      baseURL: 'http://124.223.14.236:8060/',
      imgURLList: [],
      info: {}
    }
  },
  updated() {
    const imgs = document.querySelectorAll('.markdown-body img')
    if (imgs.length <= 0) return
    this.imgURLList = Array.from(imgs).map((img) => img.src)
  },
  methods: {
    async starClick() {
      const isCollect = this.info.isCollect
      const isSucess = await this.userDataHandler('isCollect', isCollect)
      if (isSucess) {
        isCollect && this.$toast.success('取消收藏成功')
        isCollect || this.$toast.success('收藏成功')
      } else {
        isCollect && this.$toast.fail('取消收藏失败')
        isCollect || this.$toast.fail('收藏失败')
      }
    },
    async userDataHandler(key, value) {
      const type = key === 'isCollect' ? '1' : '2'
      const newIsCollect = !value
      const action = newIsCollect ? 'add' : 'del'
      try {
        await userDataHandle(type, this.id, action)
        this.info[key] = newIsCollect
        return true
      } catch {
        return false
      }
    },
    async supportClick() {
      const isLike = this.data.info.isLike
      const isSucess = await this.userDataHandler('isLike', isLike)
      if (isSucess) {
        isLike && this.$toast.success('取消点赞成功')
        isLike || this.$toast.success('点赞成功')
      } else {
        isLike && this.$toast.fail('取消点赞失败')
        isLike || this.$toast.fail('点赞失败')
      }
    },
    shareClick() {},
    async craetedDo(aid) {
      try {
        const { data } = await getArticleDetial(aid)
        this.info = data.info
        this.data = Object.freeze(data)
      } catch {}
    },
    markdownBodyClick(e) {
      const target = e.target
      if (target.tagName === 'IMG') {
        this.$ImagePreview({
          images: this.imgURLList,
          startPosition: this.imgURLList.findIndex(
            (imgurl) => imgurl === target.src
          )
        })
      }
    },
    gridItemClick(aid) {
      this.$router.push({
        name: 'articleshow',
        query: {
          aid
        }
      })
      this.craetedDo(aid)
    }
  },
  computed: {
    recommend() {
      return this.data.recommend || []
    }
  }
}
</script>

<style lang="less" scoped>
.my_article_detial {
  padding: 20px;
  padding-bottom: 50px;
  .art_bottom {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 20px;
    background-color: #fff;
    padding: 15px;
    border-top: 0.01333rem solid #d8d8d8;
  }
  .grid-item-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .g-image {
      width: 120px;
      height: 100px;
      margin: 15px 0;
    }
    .g-text {
      font-size: 10px;
      color: #323233;
      padding: 15px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      padding: 0 0.33333rem;
      -webkit-line-clamp: 1;
    }
  }
  .recommend_about {
    .van_cell {
      color: #323233;
      font-size: 0.32667rem;
    }
  }
  .author .van-cell {
    padding: 25px 5px;
  }
  .author_message {
    display: flex;
  }
  .author_time {
    margin-left: 6px;
    font-size: 12px;
    .pub_time {
      color: #b7b7b7;
    }
  }
}
</style>
